<template>
  <div>
    <div id="test32" v-html="paymentHtml"></div>
    <div class="main-top">
      <h1>确认缴费信息</h1>
    </div>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      size="default"
      :disabled="true"
      label-width="100px"
    >
      <img
        src="@/assets/images/已支付.png"
        alt="donate"
        class="checkPayImg full-screen-overlay"
        v-if="isCost"
      />
      <el-row gutter="15">
        <el-col :span="10">
          <el-form-item label="单位" prop="uId">
            <el-input
              v-model="formData.uId"
              type="text"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="门牌" prop="doorNum">
            <el-input
              v-model="formData.doorNum"
              type="text"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="缴费金额" prop="price">
        <el-input
          v-model="formData.price"
          type="text"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" prop="pName">
        <el-input
          v-model="formData.pName"
          type="text"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="pNum">
        <el-input
          v-model="formData.pNum"
          type="text"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="subBtn">
      <el-button v-if="!isCost" type="primary" @click="submitForm"
        >去支付</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { getInfo } from "@/api/login";
import { onMounted } from "vue";
import { checkIdCard } from "@/api/transfer/index";
import { getUserByIdCard, initiatePayment } from "@/api/personnel/personnel";
const formRef = ref();
const loginUserId = ref();
const isCost = ref(false);
// 使用JavaScript的Date对象获取当前日期
const currentDate = new Date();
// 分别获取年、月、日
const year = currentDate.getFullYear();
const month = currentDate.getMonth() + 1; // 注意：getMonth()返回的月份是从0开始的，所以需要+1
const day = currentDate.getDate();
const hour = currentDate.getHours();
const minute = currentDate.getMinutes();
const second = currentDate.getSeconds();
const formattedDate = `${year}${month < 10 ? "0" + month : month}${
  day < 10 ? "0" + day : day}${hour < 10 ? "0" + hour : hour}${minute < 10 ? "0" + minute : minute}${second < 10 ? "0" + second : second}`;
const data = reactive({
  formData: {
    uId: undefined,
    doorNum: undefined,
    price: 128.8,
    pName: undefined,
    pNum: undefined,
  },
  orderData: {
    outTradeNo: undefined,
    totalAmount: undefined,
    subject: undefined,
    body: undefined,
  },
  paymentHtml: "",
  rules: {
    uId: [
      {
        required: true,
        message: "",
        trigger: "blur",
      },
    ],
    doorNum: [
      {
        required: true,
        message: "",
        trigger: "blur",
      },
    ],
    price: [
      {
        required: true,
        message: "",
        trigger: "blur",
      },
    ],
    pName: [
      {
        required: true,
        message: "",
        trigger: "blur",
      },
    ],
    pNum: [
      {
        required: true,
        message: "",
        trigger: "blur",
      },
    ],
  },
});
const { formData, rules } = toRefs(data);
/**
 * @name: 表单提交
 * @description: 表单提交方法
 * @return {*}
 */
function submitForm() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    // TODO 提交表单，沙箱支付
    const completeTradeNo = formattedDate + loginUserId.value;
    data.orderData.outTradeNo = completeTradeNo;
    data.orderData.totalAmount = data.formData.price;
    data.orderData.subject = "缴费";
    data.orderData.body = loginUserId;
    initiatePayment(data.orderData).then((res) => {
        console.log(res);
        document.getElementById("test32").innerHTML = res;
        eval(document.getElementById("test32").getElementsByTagName("script").item(0).innerHTML)
      })
      .catch(() => {});
  });
}
/**
 * @name: 钩子函数，通过登录用户的id获得这个用户的全部信息
 */
onMounted(() => {
  getInfo().then((res) => {
    loginUserId.value = res.user.userId;
    checkIdCard(loginUserId.value).then((res) => {
      data.formData.pNum = res.data.userIdCard;
      data.formData.pName = res.data.userName;
      getUserByIdCard(res.data.userIdCard).then((result) => {
        data.formData.uId = result.data.uId;
        data.formData.doorNum = result.data.doorNum;
        if (result.data.costState == 1) {
          isCost.value = true;
        }
      });
    });
  });
  
});
</script>
<style>
.main-top {
  text-align: center;
}
.subBtn {
  margin-left: 5%;
}
.full-screen-overlay {
  position: fixed; /* 固定定位 */
  top: 25%;
  left: 40%;
  width: 50%; /* 宽度100% */
  height: 100vh; /* 高度100视口高度 */
  z-index: 9999; /* 确保图片在最上层 */
  object-fit: cover; /* 图片自适应 */
}
.checkPayImg {
  width: 50vh;
  height: 50vh;
}
</style>
